<template>
	<view class="content">
		<pagehead :title="title" :titlecolor='titlecolor' :isback='isback'></pagehead>
		<view class='login-info'>
			<iconInput v-for="(item,index) in iconInputList" :iconsrc="item.iconsrc"
				:placeholdertext="item.placeholdertext" :isgetcode='item.isgetcode' :ref='item.name'></iconInput>
		</view>
		<view class='bottom-button'>
			<view class='login'>
				完成设置
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				imgurl: getApp().globalData.imgurl,
				// 页面标题
				title: '忘记密码',
				titlecolor: 'black',
				isback: true,
				// 列表
				iconInputList: [{
						name: 'phone',
						iconsrc: getApp().globalData.imgurl+'phone.png',
						placeholdertext: '请输入手机号',
						isgetcode: false
					},
					{
						name: 'code',
						iconsrc: getApp().globalData.imgurl+'code.png' ,
						placeholdertext: '请输入验证码',
						isgetcode: true
					},
					{
						name: 'password',
						iconsrc: getApp().globalData.imgurl+'password.png',
						placeholdertext: '请输入密码(8位以上数字加字母组合)',
						isgetcode: false
					},
					{
						name: 'passwordagain',
						iconsrc:getApp().globalData.imgurl+'password.png' ,
						placeholdertext: '请再输入一次密码',
						isgetcode: false
					}
				]
			}
		},
		onLoad() {

		},
		methods: {}
	}
</script>

<style lang='less' scoped>
	.content {
		width: 100vw;
		height: 100vh;
		position: relative;

		.header {
			width: 100vw;
			height: 80rpx;
			position: relative;
			padding: 20rpx 0rpx;

			.back {
				width: 25rpx;
				height: 46rpx;
				position: absolute;
				left: 32rpx;
				top: 36rpx;

			}

			.title {
				display: block;
				color: #212121;
				font-size: 42rpx;
				text-align: center;
				line-height: 80rpx;
			}
		}

		.login-info {
			width: 684rpx;
			margin: 0px auto;
			margin-top: 30rpx;

			.forgot-password {
				display: flex;
				justify-content: flex-end;
				margin-top: 40rpx;

				text {
					color: #666666;
					font-size: 24rpx;
				}
			}
		}

		.bottom-button {
			width: 684rpx;
			line-height: 80rpx;
			margin: 0px auto;
			position: absolute;
			bottom: 163rpx;
			left: 50%;
			transform: translateX(-50%);

			.login {
				background-color: #2F70F1;
				border-radius: 40rpx;
				color: #fff;
				text-align: center;
				;
			}

			.register {
				margin-top: 30rpx;
				color: #2F70F1;
				text-align: center;
				;
			}
		}
	}
</style>
